@import "_function.less";
@import "normalize.css";

.bookshelf
.header{
  .h(88);
  background-color: #5ebbff;
  div{
    .h(88);
    .lh(88);
    color: #ffffff;
  }
  .title{
    float: left;
    width: 25%;
    .fs(36);
    text-align: center;
  }
  .control{
    float: right;
    width: 25%;
    text-align: center;
    i{
      .fs(40);
    }
  }
}
.bookshelf
.content{
  .info{
    .h(320);
    .p(0,70,0,70);
    background: url("../image/bg23.jpg") no-repeat;
    background-size: cover;
    img{
      float: left;
      .w(200);
      .h(280);
      .mt(60);
    }
    p{
      float: left;
      .ml(40);
      .w(340);
      .mb(25);
      color: #ffffff;
      .carry-on{
        float: left;
        .w(28);
        .h(28);
        .ml(10);
        vertical-align: middle;
        background: url("../image/carry_on.png") no-repeat;
        .bs(28,28);
      }
    }
    .first{
      .mt(85);
    }
  }
  .list{
    .pl(70);
    .pr(70);
    .mt(60);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item{
      width: 33.33%;
      .mb(40);
      img{
        .w(160);
        .h(240);
        .mb(30);
      }
      .fs(28);
      color: #333333;
      text-align: center;
    }
  }
}
.bookshelf
.footer{
  width:100%;
  .h(97);
  bottom: 0;
  position: fixed;
  background-color: #ffffff;
  border-top: #c0c0c0 1px solid;
  a{
    float: left;
    .h(97);
    width: 25%;
    color: #666666;
    text-align: center;
    img{
      display: block;
      .w(50);
      .h(70);
      .mt(12);
      margin-left: auto;
      margin-right: auto;
    }
  }
}